<template>
  <view class="container" style="padding-bottom: 90px">
    <!--  tab 栏 -->
    <view
      v-if="tabMenus == null || tabMenus.length == 0"
      class="data-empty-full"
    >
      <u-empty />
    </view>
    <view v-else class="wh100">
      <view class="tabs">
        <u-tabs
          :list="tabMenus"
          lineColor="#F3C45D"
          lineWidth="30"
          :activeStyle="activeStyle"
          @click="onTabClick"
        />
      </view>
      <view
        class="data-empty-wh100"
        v-if="leftMenus == null || leftMenus.length == 0"
      >
        <u-empty />
      </view>
      <view v-else class="items-container" style="padding-bottom: 90px">
        <view
          @click="onItemClick(item)"
          class="items"
          :id="`menu-${item.id}`"
          :class="{ current: currentCateIdx == index }"
          v-for="(item, index) in leftMenus"
          :key="item.id"
          style="
            margin: 15px 20rpx;
            background-color: #fff;
            border-radius: 10px;
            padding: 12px 15px;
            display: flex;
            justify-content: space-between;
          "
        >
          <text>{{ item.name }}</text>
          <text>￥{{ item.price }}</text>
        </view>
        <!-- 加载更多 -->
        <li-loadmore
          :status="loadStatus"
          :loading-text="loadingText"
          :loadmore-text="loadmoreText"
          :nomore-text="nomoreText"
          @loadmore="onReachBottomEvent"
          line
        />
      </view>
    </view>
    <view
      class="bottom-add"
      style="
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        background-color: #f3c45d;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        z-index: 9999;
      "
      @click="btnAddClick"
    >
      新建加料
    </view>
  </view>
</template>

<script>
import {
  umodal,
  utoast,
  uShowLoading,
  uHideLoading,
  uNavigateTo,
} from "../../../utils/uniUtils.js";
import liLoadmore from "../../../components/li-loadmore/li-loadmore.vue";
export default {
  components: {
    liLoadmore,
  },
  data() {
    return {
      details: {},
      searchParam: {
        name: "",
      },
      prefixIconStyle: {
        fontSize: "24px",
      },
      activeStyle: {
        color: "#F3C45D",
      },
      pattern: {
        buttonColor: "#F3C45D",
      },
      tabMenus: [],
      leftMenus: [],
      statusEnum: [
        //   售卖状态枚举
        { name: "在售", value: 1 },
        { name: "停售", value: 2 },
        { name: "定时起停售", value: 3 },
      ],
      warrantyTypeEnum: [
        // 保质期单位枚举
        { name: "天", value: 0 },
        { name: "年", value: 1 },
        { name: "月", value: 2 },
        { name: "小时", value: 3 },
        { name: "分钟", value: 4 },
      ],
      departmentList: [],
      currentCateIdx: 0, //左边默认分类
      disabled: true, // 禁用
      lock: false, // 节流锁

      loadStatus: "loadmore",
      loadingText: "努力加载中。。。",
      loadmoreText: "点击或上拉加载更多~~",
      nomoreText: "已全部加载~~",

      /* 分页数据区域 */
      pageNum: 1,
      pageSize: 10,
      total: 0,
      showLoadMore: false,
    };
  },
  onReachBottom() {
    this.onReachBottomEvent();
  },

  async mounted() {
    await this.GetFoodFeedCategory();
    // await this.GetDepartment();
  },
  methods: {
    /**
     * 触底事件
     */
    onReachBottomEvent() {
      console.log("onReachBottom");
      // 拉新数据再拼接
      if (this.leftMenus.length < this.total) {
        this.showLoadMore = true;
        setTimeout(async () => {
          uShowLoading();
          if (this.showLoadMore) {
            this.pageNum += 1;
          }
          this.loadStatus = "loading";
          await this.GetFoodFeed();
          uHideLoading();
        }, 300);
      } else {
        // utoast("没有更多数据了!", toastIconEnum.error);
        return;
      }
    },
    fabClick() {
      uNavigateTo("/pages/workbench/food/transfer");
    },
    bindPicker1Change(e) {
      // console.log("e-->", e);
      this.details.feedTypeId = this.tabMenus[e.detail.value].id;
    },
    bindPickerwarrantyTypeChange(e) {
      // console.log("e-->", e);
      this.details.warrantyType = this.warrantyTypeEnum[e.detail.value].value;
    },
    bindPickerstatusChange(e) {
      // console.log("e-->", e);
      this.details.status = this.statusEnum[e.detail.value].value;
    },

    bindPicker2Change(e) {
      // console.log("e-->", e);
      this.details.addPriceWay = this.addPriceWayList[e.detail.value].id;
    },
    /**
     *  上tab栏 点击事件
     */
    async onTabClick(e) {
      this.pageNum = 1;
      this.leftMenus = [];
      await this.GetFoodFeed(e.index);
      this.currentCateIdx = 0;
      this.disabled = true;
    },
    /**
     * 左tab栏点击事件
     */
    onLeftClick(idx) {
      this.currentCateIdx = idx;
      this.details = this.leftMenus[idx];
      this.disabled = true;
    },
    /**
     * 做法分组选择事件
     */
    feedCataChange(e) {
      console.log(e);
    },
    /**
     * 获取加料分类
     */
    async GetFoodFeedCategory() {
      let {
        data: { list },
      } = await this.$api.GetFoodFeedCategory({
        pageNum: 1,
        pageSize: 9999,
      });
      console.log("list-->", list);
      this.tabMenus = list;
      if (this.tabMenus.length > 0) {
        await this.GetFoodFeed();
      } else {
        this.leftMenus = [];
      }
    },
    /**
     * 获取加料
     */
    async GetFoodFeed(idx = 0) {
      console.log("GetFoodFeed");

      if (this.tabMenus[idx] != null) {
        let {
          data: { list, total },
        } = await this.$api.GetFoodFeed({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          feedTypeId: this.tabMenus[idx].id,
        });
        // console.log("GetFoodFeed-->", list);
        this.leftMenus = [...this.leftMenus, ...list];
        this.total = total;
        if (this.leftMenus.length == this.total) {
          this.loadStatus = "nomore";
        } else {
          this.loadStatus = "loadmore";
        }
        this.showLoadMore = false;
      }
    },
    
    async btnDel() {
      const res = await umodal();
      // 确定删除
      if (res) {
        await this.$api.DelFoodFeed(this.details);
        await this.GetFoodFeedCategory();
      }
    },
    /**
     * 添加按钮点击事件
     */
    async btnAddClick() {
      uni.navigateTo({
        url: "/pages/workbench/feed/doEdit?mode=add",
      });
    },
    //编辑按钮点击事件
    async btnEditClick() {
      this.disabled = false;
    },
    
    async btnSaveClick() {
      await this.EditFoodFeed();
    },
    /**
     *  编辑数据
     */
    async EditFoodFeed() {
      if (this.details.name.trim().length == 0) {
        utoast("做法名称为空！", "error");
        return;
      }
      const res = await this.$api.EditFoodFeed(this.details);
      if (res.code == 0) {
        await this.GetFoodFeedCategory();
        this.disabled = true;
      }
    },
    async GetDepartment() {
      let {
        data: { list },
      } = await this.$api.GetDepartment({
        pageNum: 1,
        pageSize: 9999,
      });
      this.departmentList = list;
      // this.details.departId =
      // this.departmentList.length > 0 ? this.departmentList[0].id : 0;
    },
    /*     bindPickerDepartChange(e) {
      this.details.departId = this.departmentList[e.detail.value].id;
    }, */
    onItemClick(item) {

      uni.navigateTo({
        url: "/pages/workbench/feed/doEdit?mode=edit&id=" + item.id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/pages/workbench/food/list.scss";

.container {
  height: 100.1vh;
  .details {
    background-color: #fff;

    .form-item {
      display: flex;
      align-items: center;
      padding: 14rpx 0;

      .lbl {
        width: 80px;
        font-size: 14px;
      }

      .form-item-right {
        flex: 1;
      }
    }
  }

  .btn-group {
    display: flex;
    justify-content: space-around;
    padding-top: 22rpx;
  }
}
</style>
